<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('服务监控')"/>
</head>
<body class="layui-layout-body theme-himio layui-anim layui-anim-upbit">
<div class="layui-fluid" style="padding-bottom: 60px;">
    <!--服务器、JVM、项目信息-->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md4 layui-col-sm6">
            <div class="layui-card">
                <div class="layui-card-header">服务器信息</div>
                <div class="layui-card-body">
                    <table class="layui-table layui-text">
                        <colgroup>
                            <col width="120">
                            <col>
                        </colgroup>
                        <tbody>
                        <tr>
                            <td>CPU / 内存</td>
                            <td>
                                [[${server.cpu.cpuNum + '核'}]] / [[${server.mem.total + 'GB'}]]
                            </td>
                        </tr>
                        <tr>
                            <td>系统 / 架构</td>
                            <td>
                                [[${server.sys.osName}]] / [[${server.sys.osArch}]]
                            </td>
                        </tr>
                        <tr>
                            <td>服务器名称</td>
                            <td>[[${server.sys.computerName}]]</td>
                        </tr>
                        <tr>
                            <td>服务器IP</td>
                            <td>[[${server.sys.computerIp}]]</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-col-md4 layui-col-sm6">
            <div class="layui-card">
                <div class="layui-card-header">JVM信息</div>
                <div class="layui-card-body">
                    <table class="layui-table layui-text">
                        <colgroup>
                            <col>
                            <col>
                        </colgroup>
                        <tbody>
                        <tr>
                            <td>虚拟机类型</td>
                            <td>[[${server.jvm.name}]]
                            </td>
                        </tr>
                        <tr>
                            <td>JDK版本</td>
                            <td>[[${server.jvm.version}]]</td>
                        </tr>
                        <tr th:with="homeWidth=${#strings.length(server.jvm.home)}">
                            <td>JDK安装路径</td>
                            <td th:if="${homeWidth>40}">
                                [[${#strings.substring(server.jvm.home,0,40)}]]<br/>
                                [[${#strings.substring(server.jvm.home,40,homeWidth)}]]
                            </td>
                            <td th:if="${homeWidth<=40}">
                                [[${server.jvm.home}]]
                            </td>
                        </tr>
                        <tr>
                            <td>JVM最大可用</td>
                            <td>
                                [[${server.jvm.max + 'MB'}]]
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-col-md4 layui-col-sm6">
            <div class="layui-card">
                <div class="layui-card-header">项目信息</div>
                <div class="layui-card-body">
                    <table class="layui-table layui-text">
                        <colgroup>
                            <col width="120">
                            <col>
                        </colgroup>
                        <tbody>
                        <tr>
                            <td>项目名称</td>
                            <td>
                                [[${projectName}]]
                            </td>
                        </tr>
                        <tr th:with="usrDirWidth=${#strings.length(server.sys.userDir)}">
                            <td>项目路径</td>
                            <td th:if="${usrDirWidth>40}">
                                [[${#strings.substring(server.sys.userDir,0,40)}]]<br/>
                                [[${#strings.substring(server.sys.userDir,40,usrDirWidth)}]]
                            </td>
                            <td th:if="${usrDirWidth<=40}">
                                [[${server.sys.userDir}]]
                            </td>
                        </tr>
                        <tr>
                            <td>启动时间</td>
                            <td>[[${server.jvm.startTime}]]</td>
                        </tr>
                        <tr>
                            <td>运行时长</td>
                            <td>
                                [[${server.jvm.runTime}]]
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- 统计图表 -->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6">
            <div class="layui-card" style="overflow: hidden;">
                <div class="layui-card-header">服务器CPU使用率</div>
                <div class="layui-card-body">
                    <div id="cpuStatistics" style="height: 400px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6">
            <div class="layui-card" style="overflow: hidden;">
                <div class="layui-card-header">服务器内存使用率</div>
                <div class="layui-card-body">
                    <div id="ramStatistics" style="height: 400px;"></div>
                </div>
            </div>
        </div>

    </div>
    <!--磁盘信息-->
    <div class="layui-row">
        <div class="layui-col-sm12">
            <div class="layui-card">
                <div class="layui-card-header">磁盘状态</div>
                <div class="layui-card-body">
                    <table class="layui-table layui-text">
                        <thead>
                        <tr>
                            <th>盘符路径</th>
                            <th>文件系统</th>
                            <th>盘符类型</th>
                            <th>总大小</th>
                            <th>可用大小</th>
                            <th>已用大小</th>
                            <th>已用百分比</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="sysFile : ${server.sysFiles}">
                            <td th:text="${sysFile.dirName}">C:\</td>
                            <td th:text="${sysFile.sysTypeName}">NTFS</td>
                            <td th:text="${sysFile.typeName}">local</td>
                            <td th:text="${sysFile.total}">0GB</td>
                            <td th:text="${sysFile.free}">0GB</td>
                            <td th:text="${sysFile.used}">0GB</td>
                            <td th:class="${sysFile.usage gt 80} ? 'text-danger'">[[${sysFile.usage}]]%</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- js部分 -->
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts"/>
<script th:inline="javascript">
    var userUsed = [[${server.cpu.used}]];
    var systemUsed = [[${server.cpu.sys}]];
    var freeUsed = [[${server.cpu.free}]];

    var memUsed = [[${server.mem.used}]];
    var jvmUsed = [[${server.jvm.used}]];
    var memFree = [[${server.mem.free}]];
    var jvmFree = [[${server.jvm.free}]];
</script>
<script th:src="@{/static/assets/system/js/server.js}"></script>
</body>
</html>